<template>
  <view class="history-container">
    <view class="header">
      <text class="title">浏览历史</text>
      <view class="header-actions">
        <button 
type="warn"
          v-if="historyList.length"
          @tap="clearHistory"
        >
          <text class="bi bi-trash"></text>
          清空历史
        </button>
        <view class="view-mode">
          <text 
            class="mode-btn"
            :class="{ active: viewMode === 'grid' }"
            @tap="viewMode = 'grid'"
          >
            <text class="bi bi-grid"></text>
          </text>
          <text 
            class="mode-btn"
            :class="{ active: viewMode === 'list' }"
            @tap="viewMode = 'list'"
          >
            <text class="bi bi-list"></text>
          </text>
        </view>
      </view>
    </view>

    <!-- 历史记录列表 -->
    <view 
      v-if="historyList.length" 
      :class="['history-list', viewMode === 'grid' ? 'grid-view' : 'list-view']"
    >
      <view 
        v-for="item in historyList" 
        :key="item.id"
        class="history-item"
      >
        <image 
          :src="url(item.image, '', item.set)" 
          mode="aspectFill" 
          class="item-image"
          @tap="viewDetail(item)"
        />
        <view class="item-content">
          <view class="item-header">
            <uni-tag :text="item.type" type="primary" size="small" />
            <text class="time">{{ item.viewTime }}</text>
          </view>
          <text class="title" @tap="viewDetail(item)">{{ item.title }}</text>
          <text class="description">{{ item.description }}</text>
          <view class="item-actions">
            <button 
              class=""
              @tap="removeFromHistory(item.id)"
            >
              <text class="bi bi-trash"></text>
            </button>
            <button 

              @tap="viewDetail(item)"
            >
              查看详情
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <text class="bi bi-clock-history"></text>
      <text>暂无浏览记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

import { useRouter } from 'vue-router';

const router = useRouter();
const viewMode = ref('grid');
const url=$url
// 示例数据
const historyList = ref([
  {
    id: 1,
    type: '物理书籍',
    title: '梦溪笔谈',
    description: '北宋沈括所著，中国科学史上的里程碑之作',
    image: 'b0',
    viewTime: '2025-01-15 15:30',
    link: '/other/physicsBook/detail?category=force&bookId=0',
    set: 'png'
  },
  {
    id: 2,
    type: '线下活动',
    title: '雅趣手作',
    description: '每周六下午，在"线下雅聚"手工坊，体验古风器具、传统乐器或古代文具制作',
    image: 'nav9',
    viewTime: '2025-01-14 10:20',
    link: '/events/detail/1',
    set: 'png'
  },
  {
    id: 3,
    type: '线下活动',
    title: '雅集论道',
    description: '每月第一个周日晚，在"线下雅聚"沙龙区，参与古代物理主题沙龙、辩论赛或故事会',
    image: 'nav10',
    viewTime: '2025-01-13 18:45',
    link: '/events/detail/2',
    set: 'png'
  },
  {
    id: 4,
    type: '线下活动',
    title: '雅韵体验',
    description: '每周日下午，在"线下雅聚"体验区，模拟古代物理实验、体验传统艺术中的物理原理',
    image: 'nav11',
    viewTime: '2025-01-12 14:15',
    link: '/events/detail/3',
    set: 'png'
  }
]);

// 查看详情
const viewDetail = (item) => {
  router.push(item.link);
};

// 从历史记录中移除
const removeFromHistory = (id) => {
  const index = historyList.value.findIndex(item => item.id === id);
  if (index !== -1) {
    historyList.value.splice(index, 1);
    MessagePlugin.success('已从历史记录中移除');
  }
};

// 清空历史记录
const clearHistory = () => {
  MessagePlugin.warning({
    content: '确定要清空全部历史记录吗？',
    theme: 'warning',
    closeBtn: true,
    onConfirm: () => {
      historyList.value = [];
      MessagePlugin.success('历史记录已清空');
    },
  });
};
</script>

<style lang="scss" scoped>
.history-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
}




.history-list {
  &.grid-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
  
  &.list-view {
    .history-item {
      display: flex;
      margin-bottom: 20rpx;
      
      .item-image {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
      }
      
      .item-content {
        flex: 1;
      }
    }
  }
}

.history-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  
  .item-image {
    width: 100%;
    height: 300rpx;
    background: #f5f5f5;
  }
  
  .item-content {
    padding: 20rpx;
  }
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .time {
    font-size: 24rpx;
    color: #999;
  }
  
  .title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .description {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-btn {
    font-size: 26rpx;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    
    &.delete {
      color: #dc3545;
      background: none;
      border: none;
    }
    
    &.view {
      color: #fff;
      background: var(--td-brand-color);
      border: none;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  
  .bi {
    font-size: 80rpx;
    margin-bottom: 20rpx;
    display: block;
  }
}
</style> 